<template>
  <div class="container">
    <div class="vipItem">
      <div class="vipBlock">
        <div class="title">
          <span>普卡 <em>收益X1倍</em></span>
          <time>免费</time>
        </div>
        <div class="iskt">
          <span>已开通</span>
        </div>
        <div class="btn">
        </div>
        <div class="clickDowm">
          <span>查看VIP特权 <i></i></span>
        </div>
      </div>
    </div>
    <div class="vipItem">
      <div class="vipBlock">
        <div class="title">
          <span>体验卡 <em>收益X2倍</em></span>
          <time>39<em>元/月</em></time>
        </div>
        <div class="iskt">
          <span>未开通</span>
        </div>
        <div class="btn">
          <a href="javascript:;"></a>
        </div>
        <div class="clickDowm">
          <span>查看VIP特权 <i></i></span>
        </div>
      </div>
    </div>
    <div class="vipItem">
      <div class="vipBlock">
        <div class="title">
          <span>绿卡 <em>收益X2倍</em></span>
          <time>300<em>元/年</em></time>
        </div>
        <div class="iskt">
          <span>未开通</span>
        </div>
        <div class="btn">
          <a href="javascript:;"></a>
        </div>
        <div class="clickDowm">
          <span>查看VIP特权 <i></i></span>
        </div>
      </div>
    </div>
    <div class="vipItem">
      <div class="vipBlock">
        <div class="title">
          <span>银卡 <em>收益X2倍</em></span>
          <time>500<em>元/年</em></time>
        </div>
        <div class="iskt">
          <span>未开通</span>
        </div>
        <div class="btn">
          <a href="javascript:;"></a>
        </div>
        <div class="clickDowm">
          <span>查看VIP特权 <i></i></span>
        </div>
      </div>
    </div>
    <div class="vipItem">
      <div class="vipBlock">
        <div class="title">
          <span>金卡 <em>收益X3倍</em></span>
          <time>1000<em>元/年</em></time>
        </div>
        <div class="iskt">
          <span>未开通</span>
        </div>
        <div class="btn">
          <a href="javascript:;"></a>
        </div>
        <div class="clickDowm">
          <span>查看VIP特权 <i></i></span>
        </div>
      </div>
    </div>
    <div class="vipItem">
      <div class="vipBlock">
        <div class="title">
          <span>紫卡 <em>收益X6倍</em></span>
          <time>5000<em>元/年</em></time>
        </div>
        <div class="iskt">
          <span>未开通</span>
        </div>
        <div class="btn">
          <a href="javascript:;"></a>
        </div>
        <div class="clickDowm">
          <span>查看VIP特权 <i></i></span>
        </div>
      </div>
    </div>
    <div class="vipItem">
      <div class="vipBlock">
        <div class="title">
          <span>黑卡 <em>收益X6倍</em></span>
          <time>20000<em>元/终身</em></time>
        </div>
        <div class="iskt">
          <span>未开通</span>
        </div>
        <div class="btn">
          <a href="javascript:;"></a>
        </div>
        <div class="clickDowm">
          <span>查看VIP特权 <i></i></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {

    }
  },
  created () {
    document.title = '升级会员'
  },
  methods: {
    /**
     * @deprecated 文字裁剪(将被裁剪的文字，裁剪后的字数)
     * @param text
     * @param sum
     * @returns {string}
     */
    textCut (text, sum) {
      var ar = ''
      for(var i=0; i<text.length; i++){
        if (i<sum) {
          ar += text[i]
        }
      }
      return ar+'…'
    }
  }
}
</script>
<style scoped lang='less' type="text/less" rel="stylesheet/less">
.yt-textEll{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.container{
  width: 6.86rem;
  background: #343746;
  background-size: 100%;
  padding: .3rem .32rem;
  .vipItem{
    &:nth-child(1) .vipBlock{
      background: url('./img/vip1-1.png') no-repeat 0 0;
      background-size: 6.86rem 2.8rem;
    }
    &:nth-child(2) .vipBlock{
      background: url('./img/vip2-1.png') no-repeat 0 0;
      background-size: 6.86rem 2.8rem;
    }
    &:nth-child(3) .vipBlock{
      background: url('./img/vip3-1.png') no-repeat 0 0;
      background-size: 6.86rem 2.8rem;
    }
    &:nth-child(4) .vipBlock{
      background: url('./img/vip4-1.png') no-repeat 0 0;
      background-size: 6.86rem 2.8rem;
    }
    &:nth-child(5) .vipBlock{
      background: url('./img/vip5-1.png') no-repeat 0 0;
      background-size: 6.86rem 2.8rem;
    }
    &:nth-child(6) .vipBlock{
      background: url('./img/vip6-1.png') no-repeat 0 0;
      background-size: 6.86rem 2.8rem;
    }
    &:nth-child(7) .vipBlock{
      background: url('./img/vip7-1.png') no-repeat 0 0;
      background-size: 6.86rem 2.8rem;
    }
    .vipBlock{
      width: 6.86rem;
      height: 2.8rem;
      margin-top: .2rem;
      font-size: 0;
      padding-top: .2rem;
      .title{
        padding: .26rem .34rem 0;
        color: #fff;
        line-height: .3rem;
        span{
          font-size: .44rem;
          em{
            font-style: normal;
            color: #fff;
            font-size: .24rem;
          }
        }
        time{
          font-size: .32rem;
          color: #fff;
          float: right;
          em{
            font-style: normal;
            color: #fff;
            font-size: .24rem;
          }
        }
      }
      .iskt{
        font-size: 0;
        color: #fff;
        padding:0 .34rem;
        margin-top: .04rem;
        span{
          font-size: .24rem;
        }
      }
      .btn{
        padding: 0 .34rem;
        margin-top: .4rem;
        height: .64rem;
        a{
          display: block;
          width: 1.68rem;
          height: .64rem;
          background: url("./img/btnc.png") no-repeat 0 0;
          background-size: 1.68rem .64rem;
        }
      }
      .clickDowm{
        text-align: center;
        span{
          color: #fff;
          font-size: .2rem;
          i{
            display: inline-block;
            width: .12rem;
            height: .08rem;
            background: url("./img/xia.png") no-repeat 0 0;
            background-size: .12rem .08rem;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>
